<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <svg id="svg" width="500" height="500" viewBox="0 0 32.9375 32">
        <defs>
            
            <rect id="mask" width="800" height="500", x="200", y="400" style="fill:red;stroke-width:1;stroke:rgb(0,0,0)"/>


            <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:0;stop-opacity:.1"/>
                <stop offset="50%" style="stop-color:0;stop-opacity:.1"/>
                <stop offset="50%" style="stop-color:red;stop-opacity:1"/>
                <stop offset="100%" style="stop-color:red;stop-opacity:1"/>
            </linearGradient>
        </defs>
        <g transform="scale(0.03125 0.03125)">
            <path d="M736.448 142.688c-45.312 0-133.312 64-208 64-74.656 0-168-64-208-64-274.656 0-432 738.624-226.656 738.624 173.344 0 196.672-216 433.984-216 192 0 304.672 213.376 432.672 213.376 205.312 0 50.688-736-224-736zM304.416 558.688c-79.52 0-144-64.512-144-144 0-79.52 64.48-144 144-144s144 64.48 144 144c0 79.488-64.448 144-144 144zM686.432 478.688c-17.696 0-32-14.304-32-32s14.304-32 32-32 32 14.304 32 32-14.304 32-32 32zM784.448 574.688c-17.696 0-32-14.304-32-32s14.304-32 32-32 32 14.304 32 32-14.336 32-32 32zM784.448 382.688c-17.696 0-32-14.304-32-32s14.304-32 32-32 32 14.304 32 32-14.336 32-32 32zM880.448 478.688c-17.696 0-32-14.304-32-32s14.304-32 32-32 32 14.304 32 32-14.336 32-32 32zM304.416 334.688c-44.16 0-80 35.808-80 80s35.84 80 80 80c44.192 0 80-35.808 80-80s-35.808-80-80-80z" fill="url(#orange_red)">
                
            </path>
        </g>
    </svg>

    <svg width="500" height="500" viewBox="0 0 1280 1024">
        <defs>
            <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:0;stop-opacity:.1"/>
                <stop offset="50%" style="stop-color:0;stop-opacity:.1"/>
                <stop offset="50%" style="stop-color:red;stop-opacity:1"/>
                <stop offset="100%" style="stop-color:red;stop-opacity:1"/>
            </linearGradient>

            <radialGradient id="ratial" cx="50%" cy="100%" r="100%" fx="100%" fy="100%">
                <stop offset="0%" style="stop-color:red;stop-opacity:1"/>
                <stop offset="90%" style="stop-color:red; stop-opacity:1"/>
                <stop offset="90%" style="stop-color:#444; stop-opacity:1"/>
            </radialGradient>
        </defs>

        <g>
            <path d="M640 576c105.87 0 201.87 43.066 271.402 112.598l-90.468 90.468c-46.354-46.356-110.356-75.066-180.934-75.066s-134.578 28.71-180.934 75.066l-90.468-90.468c69.532-69.532 165.532-112.598 271.402-112.598zM187.452 507.452c120.88-120.88 281.598-187.452 452.548-187.452s331.668 66.572 452.55 187.452l-90.51 90.508c-96.706-96.704-225.28-149.96-362.040-149.96-136.762 0-265.334 53.256-362.038 149.962l-90.51-90.51zM988.784 134.438c106.702 45.132 202.516 109.728 284.782 191.996v0l-90.508 90.508c-145.056-145.056-337.92-224.942-543.058-224.942-205.14 0-398 79.886-543.058 224.942l-90.51-90.51c82.268-82.266 178.082-146.862 284.784-191.994 110.504-46.738 227.852-70.438 348.784-70.438s238.278 23.7 348.784 70.438zM576 896c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64s-64-28.654-64-64z" fill="url(#ratial)">
            </path>
        </g>
    </svg>

    <script type="text/javascript">
        var svg = document.getElementById("svg");
        var color = document.getElementById("orange_red");

        function updatePercent(){
            var time = new Date().getSeconds();
            var percent = time*100/60;
            percent = percent.toFixed(1) + "%";
            var stops = color.getElementsByTagName("stop");
            stops[1].setAttribute("offset", percent);
            stops[2].setAttribute("offset", percent);
        }

        function animate(time){
            updatePercent();
            requestAnimationFrame(animate);
        }
        requestAnimationFrame(animate); 

    </script>
</body>
</html>